<template>
	<view class="article-box">
		<view class="article" :style="{'height':articleHeght}">
            <towxml :nodes="content"></towxml>
		</view>
		<view class="show-article-icon" @click="showArticle()" v-if="isShowArticleIcon">
			<img :src="`${imgPreFix()}/ic_language_pack_up.png`" alt="" v-show="!isShowArticle">
			<img :src="`${imgPreFix()}/ic_language_unfold.png`" alt="" v-show="isShowArticle">
		</view>
	</view>
	
</template>

<script >
    import towxmlFunc from '../joTowxml/index.js';
    import towxml from '../joTowxml/towxml.vue';
	import {imgPreFix} from '@/common/util/util'
	export default {
		props: {
			article: {
				type: String,
				default:'title'
			}
		},
        components: {
            towxml
        },
		data() {
			return {
				navTop:0,
				btnHeight:0,
				isShowArticle:false,
				isShowArticleIcon:false,
				articleHeght:'auto',
				content: ''
				
			}
		},
        watch: {
            article: {
                handler: function() {
                    this.content = ''
                    this.checkHeight()
                    this.content = this.farmatMath(this.article)
                },
                deep: true
            }
        },
		mounted() {
			
			
		},
		methods: {
			imgPreFix,
            // 格式化公式
            farmatMath(str) {
                if(!str) {
                    return ''
                }
                var regex = /[+\-*/=^()[\]{}]/;
                str = str.replace(/<img(.*?)src="(.*?)"(.*?)>/g, '<image$1src="$2"$3></image>');
                if (regex.test(str) && str.indexOf('$') != -1) {
                    // 处理数学公式的
                    str = str.replaceAll('<p>', '')
                    str = str.replaceAll('</p>', '')
                    str = str.replaceAll('&lt;', '<')
                    str = str.replaceAll('&gt;', '>')
                    var escapedString = str.replace(/["\n]/g, function(match) {
                      return {
                        '"': "'",
                        '\\': '\\\\',
                      }[match];
                    });
                    str = towxmlFunc(escapedString,'markdown');
                } else {
                    str = towxmlFunc(str,'html');
                }
                return str
            },
            checkHeight() {
                this.articleHeght = 'auto'
                this.$nextTick(() => {
                    this.isShowArticle = false,
                    this.isShowArticleIcon =false,
                    this.getElement('.article', 'single', boxElm => {
                    	let lineCount = Math.ceil(boxElm.height / 19);
                    	if(lineCount > 12){
                    		this.isShowArticleIcon = true;
                    		this.articleHeght = '465rpx';
                    	}
                    });
                })
            },
			showArticle(){
				this.isShowArticle = !this.isShowArticle;
				if(this.isShowArticle){
					this.articleHeght = 'auto';
				}else{
					this.articleHeght = '465rpx';
				}
				
			},
			getElement(elm, type = 'single', callback) {
				uni.createSelectorQuery().in(this)
					[type === 'array' ? 'selectAll' : 'select'](elm)
					.boundingClientRect()
					.exec(data => {
						callback(data[0]);
					});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.article-box{
		padding-top:30rpx;
		box-sizing: border-box;
		.article{
			with:100%;
			height: 300rpx;
			overflow: hidden;
			font-size: 26rpx;
			line-height: 38rpx;
			padding:0rpx 30rpx;
			box-sizing: border-box;
			word-wrap: break-word;
			padding-bottom:10rpx;
			img{
				width:100%;
			}
			
		}
		.show-article-icon{
			width:100%;
			height: 62rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			img{
				width: 23rpx;
				height: 25rpx;
			}
		}
		.lines{
			width: 100%;
			height: 10rpx;
			background: #F5F5F5;
		}
		
	}
	
	
</style>
